<template>
	<div>
		<Row>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
			<Input class="w-100" v-model="searchKey" placeholder="请输入房间名称" />
			</Col>
		</Row>
		<Row>
			<div class="w-100 d-flex justify-content-end align-items-center ">
				<Button class="m-1" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
			</div>
		</Row>
		<div class="d-flex justify-content-start align-items-center">
			<input id="roomimport" class="d-none" type="file" accept=".xlsx" @change="handleFileUpload" />
			<label class="p-1" for="roomimport">
				<span class="ivu-icon ivu-icon-md-cloud-upload btn btn-success text-xs ">
					<span class="pl-2">导入</span>
				</span>
			</label>
			<a href="https://yl-1346967611.cos.ap-beijing.myqcloud.com/temp/aroom.xlsx">下载模板</a>
		</div>
		<div v-if="this.tableInfo.data.length ==0" class="d-flex justify-content-center p-1">
			暂无数据
		</div>

		<div v-else>
			<div class="mt-1">
				<Row>
					<Col class="p-1" v-for="(row, index) in tableInfo.data" :xs="24" :sm="24" :md="12" :lg="8" :xl="6"
						:xxl="6">
					<div :style="'background-image:url('+row.cover+'); background-size: 100% 100%;'"
						class="text-xss rounded shadow overflow-hidden">
						<div class="p-2 bg-black-80 text-fuguang d-flex text-lg justify-content-start text-blod">
							<span>{{row.rname}}</span>
						</div>
						<div class="p-2 bg-black-50 text-fuguang d-flex justify-content-end">
							<span>{{row.roomid}}</span>
						</div>


						<div
							class="p-2 bg-black-50 position-relative  d-flex justify-content-between align-items-center">
							<div class="w-100 text-danhong ">
								<div class="p-2 d-flex justify-content-between align-items-center">
									<span class="text-fuguang pl-1">
										<span class="iconfont icon-canyurenshu pl-1"></span>
										<span class="ml-1 text-danhong text-blod text-lg">{{row.rnrs}}</span>
										<span class="iconfont icon-yuqiedian pl-1"></span>
										<span class="ml-1 text-danhong text-blod text-lg">{{row.yjds}}</span>
									</span>
									<span class="text-danhong text-lg text-blod ">{{row.mj}}㎡</span>
								</div>

								<div class="p-2 d-flex justify-content-sm-start align-items-center text-sm ">

									<span class="text-fuguang ">
										<span>{{row.sname}}</span>
									</span>
								</div>
							</div>
						</div>



						<div class="p-1 bg-black-50 d-flex justify-content-end">
							<Button class="text-xss ml-2" type="primary" size="small"
								@click="show(row.roomid)">详细</Button>

						</div>
					</div>
					</Col>
				</Row>
			</div>
			<div>
				<Page class="text-right mt-3" :page-size="tableInfo.pageSize" @on-change="pageSearch"
					:total="tableInfo.total" />
			</div>
		</div>
	</div>
</template>
<script>
	import * as XLSX from 'xlsx';
	export default {
		data() {
			return {
				searchKey: "",
				tableInfo: {
					currentPage: 1,
					pageSize: 12,
					total: 0,
					columnInfo: [{
							title: "房间编号",
							key: "roomid",
						},
						{
							title: "房间名称",
							key: "rname",
						},
						{
							title: "封面",
							slot: "cover",
						},
						{
							title: "面积",
							key: "mj",
						},
						{
							title: "容纳人数",
							key: "rnrs",
						},
						{
							title: "瑜伽垫数",
							key: "yjds",
						},
						{
							title: "操作",
							slot: 'action',
							width: 150
						}
					],
					data: []
				}
			}
		},
		methods: {
			init: function() {
				this.tableInfo.currentPage = 0;
				this.search();
			},
			newUser: function() {
				this.$router.push({
					path: "/room/new"
				})
			},
			show: function(roomid) {
				this.$router.push({
					path: "/room/detail?id=" + roomid
				})
			},
			remove: function(roomid) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除场馆，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/room/info",
							param: {
								roomid
							}
						}).then(data => {
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			searchs: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},
			search: function() {
				this.http.get({
					url: "/room/page",
					param: {
						// 传一个当前页
						current: this.tableInfo.currentPage,
						size: this.tableInfo.pageSize,
						searchKey: this.searchKey
					}
				}).then(data => {
					console.log(data)
					this.tableInfo.data = data.records;
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.search();
			},
			handleFileUpload: function(event) {
				const files = event.target.files;
				if (files.length === 0) return;
				const reader = new FileReader();
				reader.onload = (e) => {
					const data = new Uint8Array(e.target.result);
					const workbook = XLSX.read(data, {
						type: 'array'
					});
			
					// 获取第一个工作表
					const firstSheetName = workbook.SheetNames[0];
					const worksheet = workbook.Sheets[firstSheetName];
			
					// 转换为JSON
					let jsonData = XLSX.utils.sheet_to_json(worksheet);
			
					this.http.post({
						url: "/room/import",
						data: {
							fjs: jsonData
						}
					}).then(data => {
						this.message.info("导入成功，共计【"+data.success+"】条数据，错误数据【"+data.error+"】条。");
					});
					
					event.target.value = null;
				};
			
				reader.readAsArrayBuffer(files[0]);
			}
		},
		created: function() {
			this.init();
		}
	}
</script>

<style>

</style>